<template>
	<view class="page">
		<view class="title">以下内容仅供参考
			<text class="btn" @click="quesNext">再来一题</text>
		</view> <!-- 添加标题 -->
		<view class="conent" v-html="quesData.quesAnalysis"></view>
		<view style="height: 40px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid: '',
				quesId: '',
				quesData: {
					quesAnalysis: '选择A：<BR>他是个标准的完美主义者，和他无可救药的浪漫迷情的男人。回忆占据了他大部分的情思，容易依着自己的感觉和情绪游走，自恋倾向颇严重，对身边的人、事、物，总带点挑剔的口吻。他色得很有格调品味，也很罗曼蒂克，给他空间和时间，比较容易抓住他的心，温柔、体贴的情感，最能打动他的心，肉体和精神上的契合，是他所戮力追求的。<BR>选择B：<BR>他是个思想传统而又夹带着叛逆的矛盾男人；在爱情、工作、人际关系上，若遇到挫折或不顺利，通常在他表面上看不出有什幺异样，但是，内心深处，却是波涛汹涌、犹豫煎熬。他习惯活在自己的想象空间中，逃避不愉快的事情，独自享受着优游自得的境界。他很色，但色得很深情。他总是默默的付出真情，喜欢享受彼此依恋的心情，不会夸张自己的情感，容易深埋心中。<BR>选择C：他是个阳刚味十足的男人，有自己的个性和想法，平常还算随和，但是，一碰到与自己想法有差异的时刻，本质中的固执和牛脾气，马上都会爆发出来。他色得很大男人，',
				}
			}
		},
		onLoad(op) {
			this.quesId = op.quesId || ''
			if (this.quesId) {
				this.showQuesById()
			} else {
				this.$app.alert('请重新进入..')
			}

		},
		onShareAppMessage(option) {
			console.log(option, '分享')
			return {
				title: '甜心趣味测评·情感测评',
				desc: '你知道自己多性感吗?',
				path: '/pages/index/index?mid=' + this.mid, //+'&__id__=', // ?后面的参数会在转发页面打开时传入onLoad方法

				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		methods: {
			// 查询题目
			showQuesById() {
				let urlPost = this.$app.apiPath.dati.showQuestionById + "?quesId=" + this.quesId;
				let key = "quesId_" + this.quesId;
				if (this.aCache.has(key)) {
					this.quesData = this.aCache.get(key)

				} else {

					this.$app.post(urlPost, {}).then(res => {

						if (res.code == 200) {
							this.quesData = res.data;
							// 加入缓存,一个小时
							this.aCache.add(key, res.data);
						} else {
							this.$refs.uNotify.primary('网络错误,请重新进入小程序')
						}

					})
				}
				this.showNext = false;
			},
			quesNext() {
				uni.navigateTo({
					url: '/pages/detail/detail'
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {

		background: url('https://liandyao.com/upload/app/images/quweiceping/back04.png');

		background-size: cover;
		/* 背景图像覆盖整个容器 */
		background-position: center;
		/* 背景图像居中 */
		height: 100vh;
		/* 设置高度为视口高度 */
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: column;
		/* 垂直排列子元素 */

		align-items: center;
		/* 水平居中 */


		/* 去掉默认边距 */
		.conent {
			width: 90%;
			/* 设置宽度 */
			max-height: 90%;
			/* 设置最大高度 */
			overflow-y: auto;
			/* 允许垂直滚动 */
			background-color: rgba(253, 231, 255, 0.7);
			/* 背景颜色（可选） */
			padding: 10px;
			/* 内边距 */
			border-radius: 8px;
			/* 圆角（可选） */

			line-height: 25px;

			font-size: 15px;
			padding-bottom: 80px;
		}

		.title {
			margin-top: 20px;
			font-size: 14px;
			/* 标题字体大小 */
			font-weight: bold;
			/* 标题加粗 */
			margin-bottom: 10px;
			/* 标题与文本之间的间距 */
			width: 90%;
			/* 设置标题宽度 */
			text-align: left;
			/* 标题文字居左 */
			color: $uni-bg-color;

		}

		.btn {
			height: 30px;
			background-color: $uni-bg-color;
			color: $uni-color-primary;
			padding: 5px;
			margin-left: 60px;
			border-radius: 5px;
		}

	}
</style>